```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub周报生成器 | 开发者协作神器</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 3.5em;
            line-height: 0.75;
            margin: 0.1em 0.1em 0.1em 0;
            color: #3b82f6;
            font-weight: 700;
        }
        .gradient-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <header class="hero-gradient text-white py-20 px-6">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">GitHub周报生成器</h1>
                    <p class="text-xl mb-8 opacity-90">开发者协作效率神器 · 开源项目管理助手</p>
                    <p class="text-lg mb-8 opacity-85">智能收集、整理和生成精美的GitHub活动周报，让团队协作更透明高效</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="https://github.com/drmingdrmer/tips/tree/main/tips/gh-weekly" target="_blank" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
                            <i class="fab fa-github mr-2"></i> GitHub项目
                        </a>
                        <button class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
                            <i class="fas fa-book mr-2"></i> 文档指南
                        </button>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md" style="height: 320px;">
                        <div class="absolute inset-0 bg-white bg-opacity-20 rounded-2xl shadow-lg transform rotate-3"></div>
                        <div class="absolute inset-0 bg-white bg-opacity-20 rounded-2xl shadow-lg transform -rotate-3"></div>
                        <div class="relative bg-white rounded-2xl shadow-xl overflow-hidden" style="height: 320px;">
                            <div class="h-8 bg-gray-200 flex items-center px-4">
                                <div class="flex space-x-2">
                                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                </div>
                                <div class="text-xs text-gray-600 ml-4">GitHub Weekly Report</div>
                            </div>
                            <div class="p-4 h-full overflow-y-auto">
                                <h3 class="font-bold text-lg mb-2 text-gray-800">本周项目进展</h3>
                                <ul class="space-y-3 text-sm text-gray-700">
                                    <li class="flex items-start">
                                        <span class="inline-block w-2 h-2 bg-blue-500 rounded-full mt-1.5 mr-2"></span>
                                        <span>合并PR: 15个 (来自8位贡献者)</span>
                                    </li>
                                    <li class="flex items-start">
                                        <span class="inline-block w-2 h-2 bg-green-500 rounded-full mt-1.5 mr-2"></span>
                                        <span>关闭Issue: 23个 (含5个bug修复)</span>
                                    </li>
                                    <li class="flex items-start">
                                        <span class="inline-block w-2 h-2 bg-purple-500 rounded-full mt-1.5 mr-2"></span>
                                        <span>代码提交: 87次 (新增3,456行代码)</span>
                                    </li>
                                    <li class="flex items-start">
                                        <span class="inline-block w-2 h-2 bg-yellow-500 rounded-full mt-1.5 mr-2"></span>
                                        <span>社区讨论: 56条评论 (活跃度↑15%)</span>
                                    </li>
                                </ul>
                                <div class="mt-4 pt-4 border-t border-gray-200">
                                    <h4 class="font-semibold text-gray-800 mb-2">本周之星 ★</h4>
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                                            <i class="fas fa-user"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium">@dev-user</div>
                                            <div class="text-xs text-gray-500">贡献PR 6次 | 解决Issue 4个</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Problem Section -->
    <section class="py-16 px-6 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">它能解决什么问题?</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">在技术团队协作和开源项目管理中，定期汇报项目进展是一项重要但耗时的工作</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 transition-all duration-300 hover:border-blue-500 card-hover">
                    <div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center text-white mb-6">
                        <i class="fas fa-hourglass-half text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">信息收集繁琐</h3>
                    <p class="text-gray-600">需要手动查看多个仓库的提交记录、PR状态、Issue讨论等，耗时且容易遗漏重要信息</p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 transition-all duration-300 hover:border-blue-500 card-hover">
                    <div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center text-white mb-6">
                        <i class="fas fa-align-left text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">格式不统一</h3>
                    <p class="text-gray-600">不同人员生成的周报格式各异，缺乏专业性和一致性，影响阅读体验</p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 transition-all duration-300 hover:border-blue-500 card-hover">
                    <div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center text-white mb-6">
                        <i class="fas fa-clock text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">时间成本高</h3>
                    <p class="text-gray-600">每周需要投入大量时间整理数据、编写报告，挤占核心开发时间</p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 transition-all duration-300 hover:border-blue-500 card-hover">
                    <div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center text-white mb-6">
                        <i class="fas fa-database text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">数据不全面</h3>
                    <p class="text-gray-600">人工整理容易遗漏边缘信息，无法提供完整的项目全景视图</p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 transition-all duration-300 hover:border-blue-500 card-hover">
                    <div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center text-white mb-6">
                        <i class="fas fa-chart-pie text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">缺乏可视化</h3>
                    <p class="text-gray-600">纯文本报告难以直观展示项目活跃度和贡献分布</p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 transition-all duration-300 hover:border-blue-500 card-hover">
                    <div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center text-white mb-6">
                        <i class="fas fa-bolt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">自动化解决方案</h3>
                    <p class="text-gray-600">将原本需要数小时的手工工作压缩到几分钟内完成，保证信息的完整性和专业性</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-6 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">核心功能概述</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">强大的功能集合，满足各种团队协作需求</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-10">
                <div>
                    <div class="flex items-start mb-8">
                        <div class="bg-blue-100 p-3 rounded-lg mr-6">
                            <i class="fas fa-code-branch text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">智能数据聚合</h3>
                            <p class="text-gray-600">自动收集指定时间范围内的GitHub活动数据，包括代码提交、PR创建/合并、Issue开启/关闭、评论互动等，支持多仓库批量处理</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start mb-8">
                        <div class="bg-purple-100 p-3 rounded-lg mr-6">
                            <i class="fas fa-file-alt text-purple-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">模板化报告生成</h3>
                            <p class="text-gray-600">提供多种专业报告模板，支持Markdown、HTML等格式输出，可根据团队需求自定义样式和内容结构</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-green-100 p-3 rounded-lg mr-6">
                            <i class="fas fa-users text-green-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">贡献者分析</h3>
                            <p class="text-gray-600">自动统计各成员的贡献度，识别活跃贡献者，生成贡献排行榜和可视化图表</p>
                        </div>
                    </div>
                </div>
                
                <div>
                    <div class="flex items-start mb-8">
                        <div class="bg-yellow-100 p-3 rounded-lg mr-6">
                            <i class="fas fa-chart-line text-yellow-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">趋势分析</h3>
                            <p class="text-gray-600">对比历史数据，展示项目活跃度变化趋势，帮助识别项目发展阶段和健康状态</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start mb-8">
                        <div class="bg-red-100 p-3 rounded-lg mr-6">
                            <i class="fas fa-plug text-red-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">多平台集成</h3>
                            <p class="text-gray-600">支持与Slack、钉钉、企业微信等协作平台集成，实现周报自动推送和分享</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-6">
                            <i class="fas fa-cogs text-indigo-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">高级配置选项</h3>
                            <p class="text-gray-600">支持自定义数据筛选条件、分组规则、报告样式，满足各种复杂需求</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-6 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">使用场景</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">适用于各种技术团队和开发者场景</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-8 border border-blue-100">
                    <div class="text-blue-600 mb-4">
                        <i class="fas fa-code text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">开源项目维护</h3>
                    <p class="text-gray-600 mb-4">对于活跃的开源项目，维护者需要定期向社区汇报项目进展。使用该工具可以自动生成包含新功能、Bug修复、贡献者感谢等内容的周报，提升项目透明度和社区参与度。</p>
                    <p class="text-sm text-blue-600 font-medium">例如，一个拥有数百个贡献者的开源框架，可以通过周报让用户了解最新更新和未来规划。</p>
                </div>
                
                <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-8 border border-purple-100">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-briefcase text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">技术团队管理</h3>
                    <p class="text-gray-600 mb-4">在企业技术团队中，项目经理需要定期向上级汇报团队工作进展。该工具可以整合多个项目仓库的数据，生成包含代码质量指标、开发进度、技术债务等信息的综合报告。</p>
                    <p class="text-sm text-purple-600 font-medium">为技术决策和资源分配提供数据支撑，提高管理效率。</p>
                </div>
                
                <div class="bg-gradient-to-br from-green-50 to-teal-50 rounded-xl p-8 border border-green-100">
                    <div class="text-green-600 mb-4">
                        <i class="fas fa-blog text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">个人技术博客</h3>
                    <p class="text-gray-600 mb-4">技术博主和开发者可以将自己的GitHub活动整理成周报，分享学习心得和技术探索，建立个人技术品牌。</p>
                    <p class="text-sm text-green-600 font-medium">通过展示代码贡献、开源参与等数据，提升个人在技术社区的影响力和职业发展机会。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 px-6 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">优势与特色</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">相比其他类似工具的独特优势</p>
            </div>
            
            <div class="relative">
                <div class="absolute inset-0 flex items-center" aria-hidden="true">
                    <div class="w-full border-t border-gray-300"></div>
                </div>
                <div class="relative flex justify-center">
                    <span class="px-4 bg-gray-50 text-3xl text-blue-600">
                        <i class="fas fa-star"></i>
                    </span>
                </div>
            </div>
            
            <div class="mt-12 grid md:grid-cols-2 gap-12">
                <div class="flex flex-col items-center text-center">
                    <div class="bg-white p-4 rounded-full shadow-md mb-6">
                        <i class="fas fa-rocket text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">零配置启动</h3>
                    <p class="text-gray-600">提供开箱即用的默认配置，用户无需复杂设置即可开始使用，降低使用门槛</p>
                </div>
                
                <div class="flex flex-col items-center text-center">
                    <div class="bg-white p-4 rounded-full shadow-md mb-6">
                        <i class="fas fa-sliders-h text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">高度可定制</h3>
                    <p class="text-gray-600">支持自定义数据筛选规则、报告模板、输出格式等，满足不同团队和项目的个性化需求</p>
                </div>
                
                <div class="flex flex-col items-center text-center">
                    <div class="bg-white p-4 rounded-full shadow-md mb-6">
                        <i class="fas fa-check-circle text-green-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">数据准确性</h3>
                    <p class="text-gray-600">直接调用GitHub API获取数据，确保信息的准确性和实时性，避免人工整理的错误</p>
                </div>
                
                <div class="flex flex-col items-center text-center">
                    <div class="bg-white p-4 rounded-full shadow-md mb-6">
                        <i class="fas fa-chart-network text-yellow-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">多维度分析</h3>
                    <p class="text-gray-600">不仅关注代码提交数量，还分析PR质量、Issue响应时间、社区互动等软性指标，提供全面的项目健康度评估</p>
                </div>
                
                <div class="flex flex-col items-center text-center">
                    <div class="bg-white p-4 rounded-full shadow-md mb-6">
                        <i class="fas fa-sync-alt text-red-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">持续更新</h3>
                    <p class="text-gray-600">作为开源项目，持续接收社区贡献，功能不断完善，适应GitHub平台的最新变化</p>
                </div>
                
                <div class="flex flex-col items-center text-center">
                    <div class="bg-white p-4 rounded-full shadow-md mb-6">
                        <i class="fas fa-lock-open text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">完全开源</h3>
                    <p class="text-gray-600">代码完全开放透明，可自由修改和二次开发，满足特殊需求</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Workflow Section -->
    <section class="py-16 px-6 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">工作原理</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">了解GitHub周报生成器如何高效工作</p>
            </div>
            
            <div class="mermaid">
                graph LR
                A[GitHub API] -->|获取数据| B[数据收集模块]
                B --> C[数据分析引擎]
                C --> D[报告生成器]
                D --> E[Markdown/HTML报告]
                D --> F[可视化图表]
                C --> G[贡献者排行榜]
                E --> H[自动推送]
                F --> H
                G --> H
                H --> I[协作平台]
            </div>
            
            <div class="mt-12 grid md:grid-cols-4 gap-6">
                <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 text-center">
                    <div class="text-blue-600 mb-4">
                        <i class="fas fa-cloud-download-alt text-3xl"></i>
                    </div>
                    <h3 class="font-semibold mb-2">数据收集</h3>
                    <p class="text-sm text-gray-600">通过GitHub API获取仓库活动数据</p>
                </div>
                
                <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 text-center">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-cogs text-3xl"></i>
                    </div>
                    <h3 class="font-semibold mb-2">数据处理</h3>
                    <p class="text-sm text-gray-600">分析、分类和整理原始数据</p>
                </div>
                
                <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 text-center">
                    <div class="text-green-600 mb-4">
                        <i class="fas fa-file-alt text-3xl"></i>
                    </div>
                    <h3 class="font-semibold mb-2">报告生成</h3>
                    <p class="text-sm text-gray-600">根据模板生成格式化的报告</p>
                </div>
                
                <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 text-center">
                    <div class="text-yellow-600 mb-4">
                        <i class="fas fa-paper-plane text-3xl"></i>
                    </div>
                    <h3 class="font-semibold mb-2">自动推送</h3>
                    <p class="text-sm text-gray-600">发送报告到指定平台</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="py-16 px-6 bg-gradient-to-r from-blue-50 to-indigo-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">上手指南</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">快速开始使用GitHub周报生成器</p>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="grid md:grid-cols-2">
                    <div class="p-8 md:p-12">
                        <h3 class="text-2xl font-bold mb-6">简单四步快速启动</h3>
                        
                        <div class="mb-8">
                            <h4 class="text-lg font-semibold mb-3 flex items-center">
                                <span class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3">1</span>
                                环境准备
                            </h4>
                            <p class="text-gray-600 ml-9">确保系统已安装Node.js（建议版本16+）和Git，并配置好GitHub账号和Personal Access Token。</p>
                        </div>
                        
                        <div class="mb-8">
                            <h4 class="text-lg font-semibold mb-3 flex items-center">
                                <span class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3">2</span>
                                安装工具
                            </h4>
                            <div class="bg-gray-800 rounded-lg p-4 text-sm text-gray-100 overflow-x-auto ml-9">
                                <code class="block mb-2"># 克隆仓库</code>
                                <code class="block mb-2">git clone https://github.com/drmingdrmer/tips.git</code>
                                <code class="block mb-2">cd tips/tips/gh-weekly</code>
                                <code class="block">npm install</code>
                            </div>
                        </div>
                        
                        <div class="mb-8">
                            <h4 class="text-lg font-semibold mb-3 flex items-center">
                                <span class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3">3</span>
                                配置参数
                            </h4>
                            <p class="text-gray-600 ml-9">创建配置文件，设置目标仓库、时间范围、输出格式等参数。可以参考示例配置文件进行个性化调整。</p>
                        </div>
                        
                        <div class="">
                            <h4 class="text-lg font-semibold mb-3 flex items-center">
                                <span class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3">4</span>
                                生成周报
                            </h4>
                            <div class="bg-gray-800 rounded-lg p-4 text-sm text-gray-100 overflow-x-auto ml-9">
                                <code class="block mb-2"># 生成本周周报</code>
                                <code class="block mb-2">npm run weekly</code>
                                <code class="block">npm run generate -- --start 2024-01-01 --end 2024-01-07</code>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-8 md:p-12 border-l border-gray-200 flex flex-col justify-center">
                        <div class="mb-8">
                            <h4 class="text-xl font-semibold mb-4 flex items-center text-blue-600">
                                <i class="fas fa-exclamation-circle mr-2"></i> 使用门槛与成本
                            </h4>
                            <ul class="space-y-4 text-gray-600">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span><strong>技术门槛:</strong> 需要基本的命令行操作能力，熟悉Git和GitHub的基本概念</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span><strong>注册要求:</strong> 需要GitHub账号和相应的API访问权限</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt=1 mr-2"></i>
                                    <span><strong>费用情况:</strong> 工具本身完全免费开源，但需要注意GitHub API的使用限制</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt=1 mr-2"></i>
                                    <span><strong>部署方式:</strong> 支持本地部署和云端运行，可根据团队规模和需求选择</span>
                                </li>
                            </ul>
                        </div>
                        
                        <div>
                            <h4 class="text-xl font-semibold mb-4 flex items-center text-blue-600">
                                <i class="fas fa-lightbulb mr-2"></i> 思考问题
                            </h4>
                            <p class="text-gray-600 mb-4 drop-cap">你的团队目前如何汇报项目进展？是否遇到过信息收集困难或格式不统一的问题？这个工具能否帮助你们提升工作效率和团队透明度？</p>
                            <div class="bg-blue-50 border border-blue-100 rounded-lg p-4">
                                <h5 class="font-semibold text-blue-800 mb-2 flex items-center">
                                    <i class="fas fa-info-circle mr-2"></i> 局限性说明
                                </h5>
                                <p class="text-sm text-blue-700">该工具主要依赖GitHub API，对于私有仓库需要相应的访问权限。同时，生成的报告质量很大程度上取决于项目的GitHub使用规范，建议团队建立统一的提交规范和PR流程以获得最佳效果。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-6 bg-white">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">准备好提升团队协作效率了吗?</h2>
            <p class="text-xl text-gray-600 mb-8">立即开始使用GitHub周报生成器，让项目报告变得简单高效</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="https://github.com/drmingdrmer/tips/tree/main/tips/gh-weekly" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-medium transition duration-300 flex items-center justify-center">
                    <i class="fab fa-github mr-3 text-xl"></i> 访问GitHub仓库
                </a>
                <a href="#" class="bg-white border-2 border-blue-600 text-blue-600 hover:bg-blue-50 px-8 py-4 rounded-lg font-medium transition duration-300 flex items-center justify-center">
                    <i class="fas fa-book mr-3 text-xl"></i> 查看详细文档
                </a>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```